<script setup lang="ts">
import ArticleMenu from '@/components/article-menu.vue';
import { computed, onMounted, ref } from 'vue';
import ArticleHeader from '@/views/detail/components/ArticleHeader.vue';
import type { ArticleInfo } from '@/types/article.ts';
import ArticleSummary from '@/views/detail/components/ArticleSummary.vue';
import ArticleFooter from '@/views/detail/components/ArticleFooter.vue';
import ArticleToc from '@/views/detail/components/ArticleToc.vue';
import ArticleContent from '@/views/detail/components/ArticleContent.vue';
import { useRoute } from 'vue-router';
import { getArticleDetail, selectRecent } from '@/api/article';
import useGenerateTocTree from '@/hooks/generateTocTree.ts';
import ArticleNavigation from '@/views/detail/components/ArticleNavigation.vue';
import LayoutFooter from '@/components/layout-footer.vue';
import ArticleTopBg from '@/components/article-top-bg.vue';
import LayoutFloatingButtons from '@/components/layout-floating-buttons.vue';
import ArticleComment from '@/views/detail/components/ArticleComment.vue';
import LatestArticles from '@/views/detail/components/LatestArticles.vue';
import LoginModal from '@/components/login-modal.vue';
import { useWebConfigStore } from '@/stores';

// 文章信息
const route = useRoute();
const webConfigStore = useWebConfigStore();
const showLogin = ref(false);
const id = ref(route.query.id as string);
const articleInfo = ref<ArticleInfo>({
  id: id.value,
  title: '',
  summary: '',
  content: '',
  author: '',
  categoryName: '',
  tags: [],
  coverImage: '',
  coverImageName: '',
  seoTitle: '',
  seoDescription: '',
  seoKeywords: [],
  slug: '',
  isSticky: 0,
  allowComments: 1,
  source: 0,
  externalLink: '',
  isRecommended: 0,
  publishTime: '',
  views: 0,
  sourceAddress: ''
});
const lastArticles = ref([]);
const selectArticleDetail = async () => {
  const id = route.query.id;
  const result = await getArticleDetail(id);
  if(result.data){
    articleInfo.value = result.data;
  }
  const { data } = await selectRecent();
  lastArticles.value = data;
};
// 生成目录
const tocTree = ref();
onMounted(async () => {
  await selectArticleDetail();
  tocTree.value = useGenerateTocTree(articleInfo.value.content);
});
</script>

<template>
  <div class="layout-container">
    <!-- 菜单栏 -->
    <ArticleMenu />
    <ArticleTopBg
      height="600px"
      :title="webConfigStore.articleTitle"
      :subtitles="webConfigStore.articleSubtitle"
      :background-images="webConfigStore.parsedArticleCarousel"
      v-motion
      :initial="{ opacity: 0, y: 50 }"
      :enter="{ opacity: 1, y: 0, transition: { duration: 800 } }"
    ></ArticleTopBg>
    <!-- 主体布局 -->
    <div class="article-main">
      <!-- 文章正文 -->
      <div class="article-detail-card box-radius"
           v-motion
           :initial="{ opacity: 0, x: -30 }"
           :enter="{
            opacity: 1,
            x: 0,
            transition: { delay: 600 }
          }">
        <!-- 标题部分 -->
        <ArticleHeader :article-info="articleInfo" />
        <!-- 摘要部分 -->
        <ArticleSummary :summary="articleInfo.summary" />
        <!-- 文章内容 -->
        <ArticleContent :content="articleInfo.content" />
        <!-- 文章底部 -->
        <ArticleFooter :article-info="articleInfo" />
        <!-- 文章导航 -->
        <ArticleNavigation :article-info="articleInfo" />
        <!-- 评论 -->
        <ArticleComment :article-id="id" :article-author-id="'1879871196703608833'" @show-login="() => showLogin = true" />
      </div>
      <!-- 右侧边栏 -->
      <div class="article-sidebar">
        <!-- 文章目录 -->
        <ArticleToc :toc-items="tocTree"
                    v-motion
                    :initial="{ opacity: 0, x: 30 }"
                    :enter="{
            opacity: 1,
            x: 0,
            transition: { delay: 800 }
          }"
        />
        <!-- 最新文章列表 -->
        <LatestArticles :articles="lastArticles"
                        v-motion
                        :initial="{ opacity: 0, x: 30 }"
                        :enter="{
            opacity: 1,
            x: 0,
            transition: { delay: 1200 }
          }"
        />
      </div>
    </div>
    <!--返回顶部按钮-->
    <LayoutFloatingButtons />
    <LayoutFooter />
    <LoginModal :visible="showLogin"  @update:visible="args => showLogin = args" />
  </div>
</template>

<style lang="less">
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .article-main {
    display: flex;
    width: 1161px;
    margin: 0 auto;
    padding: 92px 12px 24px;
    justify-content: space-between;

    .article-detail-card {
      width: 900px;
      min-height: 400px;
      background-color: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .article-sidebar {
      width: 237px;
      position: sticky;
      top: 92px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      height: fit-content;
    }
  }
}

// 移动端响应式优化
@media (max-width: 1200px) {
  .layout-container {
    .article-main {
      width: 95%;
      max-width: 1161px;

      .article-detail-card {
        width: calc(100% - 261px);
      }
    }
  }
}

@media (max-width: 992px) {
  .layout-container {
    .article-main {
      width: 92%;
      padding: 72px 12px 24px; // 减小顶部内边距

      .article-detail-card {
        width: 100%;
      }

      .article-sidebar {
        display: none; // 隐藏侧边栏
      }
    }
  }
}

@media (max-width: 768px) {
  .layout-container {
    .article-main {
      width: 95%;
      padding: 62px 0 16px; // 调整内边距

      .article-detail-card {
        margin: 0;
        border-radius: 8px; // 调整圆角

        // 优化文章内容在移动端的显示
        :deep(.article-content) {
          padding: 16px;

          img {
            max-width: 100%;
            height: auto;
          }

          pre {
            margin: 10px 0;
            padding: 10px;
            overflow-x: auto;
          }

          table {
            display: block;
            overflow-x: auto;
            width: 100%;
          }
        }

        // 优化文章头部在移动端的显示
        :deep(.article-header) {
          padding: 16px;

          .title {
            font-size: 1.5rem;
          }

          .meta-info {
            flex-wrap: wrap;
            gap: 8px;
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .layout-container {
    .article-main {
      width: 95%;
      padding: 52px 8px 12px;

      .article-detail-card {
        :deep(.article-content) {
          padding: 12px;
          font-size: 15px; // 调整字体大小

          h1 { font-size: 1.6em; }
          h2 { font-size: 1.4em; }
          h3 { font-size: 1.2em; }

          // 优化代码块显示
          pre {
            margin: 8px -12px;
            border-radius: 0;
            font-size: 14px;
          }
        }

        :deep(.article-header) {
          padding: 12px;

          .title {
            font-size: 1.3rem;
          }

          .meta-info {
            font-size: 0.9rem;
          }
        }

        // 优化文章底部样式
        :deep(.article-footer) {
          padding: 12px;

          .tags {
            flex-wrap: wrap;
          }
        }

        // 优化评论区样式
        :deep(.article-comment) {
          padding: 12px;
        }
      }
    }
  }
}

// 适配刘海屏
@supports (padding: env(safe-area-inset-left)) {
  .layout-container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

// 横屏优化
@media screen and (orientation: landscape) and (max-height: 576px) {
  .layout-container {
    .article-main {
      padding-top: 42px;
    }
  }
}
</style>
